<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!doctype html>
<html class="no-js">
<head>
  <title>商品信息</title>
  <%@ include file="../mobile_inc.jsp" %>
<script>
//类型格式化

			var pageArray = [];
			var allCount;//获取总记录条数
			var allPage;//计算出总共页数
			var currentPage = 1;//设置当前页
			var rows = 10;//设置每页列数
			$(document).on('pageinit', function () {
				loadMsg(1);
			    
			});
			
			function loadMsg(page){
				currentPage = page;
				$.ajax({
					url: '${ctx}/mobile/getComDetail?id=${id}',
			        dataType: "json",
			        async: true,
			        success: function (result) {
			        	
			        	//分页相关
			        	allCount =  result.rows;
			        	allPage  = Math.ceil(allCount/rows);//总页数
			        	
			        	var upPage;//上一页
			        	if(currentPage-1 <= 0){
			        		upPage = 1;
			        	}else{
			        		upPage = currentPage-1;
			        	}
			        	var downPage;//下一页
			        	if(currentPage+1 > allPage){
			        		downPage = allPage;
			        	}else{
			        		downPage = currentPage+1;
			        	}
			        	$("#top_count_num").empty();
			        	$("#count_num").empty();
			        	
			        	
			        	var down_need_num = "  <ul data-am-widget='pagination' class='am-pagination am-pagination-default' > </ul>";
			        	$("#count_num").append(down_need_num);
			        	for(var i=1;i<=allPage;i++){
			        		pageArray[i] = i;
			        		ulNum = "<li class=''><a href='#' class='am-active' onclick='loadMsg("+pageArray[i]+");' target='_self' >"+pageArray[i]+"</a></li>";
			    			$("#count_num ul").append(ulNum);
			    		}
			        	$("#queryCom").empty();
			        	if(result.obj != null){
			        		var content = new Array();
			        		var createTime;
			        		for(var i=0;i<result.obj.length;i++){
			        			createTime = formatDate(result.obj[i].createTime);
			        			var values = result.obj[i].flag;
			        			if(values == 1)
			        		   	{
			        				values= "<font color='green'>求购</font>";
			        		   	}
			        		   	else if(values == 2)
			        		   	{
			        		   		values= "<font color='red'>出售</font>";
			        		   	}
			        			content[i] = "<li> <div id='mydiv' class='am-gallery-item'>  <a href='${ctx}/mobile/commoditySkip?id="+result.obj[i].marketId+"' target='_self' class=''><img id='imgs'  src='"+result.obj[i].photo+"'><h3 class='am-gallery-title'>标题："+result.obj[i].title+"</h3><h3 class='am-gallery-title'>介绍："+result.obj[i].summary+"</h3><small><div class='am-gallery-desc'>电&nbsp&nbsp话:"+result.obj[i].phone+"</small><br><font size=\"1\" color=\"red\">￥</font><font size=\"4\" color=\"red\">"+result.obj[i].price+"</font>&nbsp&nbsp&nbsp&nbsp&nbsp<font>"+values+"</font>&nbsp&nbsp&nbsp&nbsp&nbsp;&nbsp;&nbsp;&nbsp;<small>发布于:&nbsp;&nbsp;"+createTime+"</small></div></p></a></div></li> ";
				        	}
			        		$("#queryCom").empty();
			        		$("#queryCom").append("<ul data-am-widget=\"gallery\" class=\"am-gallery am-avg-sm-2 am-avg-md-3 am-avg-lg-4 am-gallery-bordered\" data-am-gallery=\"{  }\">"+content.join(" ")+"</ul>");
			        	}
			        
			        },
			        error: function (request, error) {
			        	$("#doc-scrollspy-wrapper").append("<div class='am-alert'> 暂时还没有你要的租车信息哦 ！ </div>");
			        }
			        
			    });
			}
			
			function isNull( str ){
				if ( str == "" ) return true;
				var regu = "^[ ]+$";
				var re = new RegExp(regu);
				return re.test(str);
			}
			var scontent;
			var pageArray = [];
			var allCount;//获取总记录条数
			var allPage;//计算出总共页数
			var currentPage = 1;//设置当前页
			var rows = 10;//设置每页列数
			function searchComm(){
				scontent =  encodeURI(encodeURI($("#search-content").val()));
				if(scontent == null || scontent == "" || isNull( scontent )){
					alert("请输入搜索条件！");
				}else{
					loadMsgs(1);
				}
				
			}
		
			function loadMsgs(page){
				currentPage = page;
				$.ajax({
			        url: '${ctx}/mobile/searchComm?content='+scontent+'&page='+page+'&rows='+rows+'',
			        dataType: "json",
			        async: true,
			        success: function (result) {
		      	
			        	//分页相关
			        	allCount =  result.rows;
			        	allPage  = Math.ceil(allCount/rows);//总页数
			        	
			        	var upPage;//上一页
			        	if(currentPage-1 <= 0){
			        		upPage = 1;
			        	}else{
			        		upPage = currentPage-1;
			        	}
			        	var downPage;//下一页
			        	if(currentPage+1 > allPage){
			        		downPage = allPage;
			        	}else{
			        		downPage = currentPage+1;
			        	}
			        	$("#top_count_num").empty();
			        	$("#count_num").empty();
		      	
			        	var down_need_num = "  <ul data-am-widget='pagination' class='am-pagination am-pagination-default' > </ul>";
			        	$("#count_num").append(down_need_num);
			        	for(var i=1;i<=allPage;i++){
			        		pageArray[i] = i;
			        		ulNum = "<li class=''><a href='#' class='am-active' onclick='loadMsg("+pageArray[i]+");' target='_self' >"+pageArray[i]+"</a></li>";
			    			$("#count_num ul").append(ulNum);
			    		}
		
			        	if(result.obj != null && result.obj.length > 0){
			        		var contentss = new Array();
			        		for(var i=0;i<result.obj.length;i++){
			        			contentss[i] = "<li> <div id='mydiv' class='am-gallery-item'>  <a href='${ctx}/mobile/commoditySkip?id="+result.obj[i].commodityId+"' target='_self' class=''><img id='imgs'   src='"+result.obj[i].photo+"'><div class='am-gallery-title'> <h3>"+result.obj[i].names+"</h3></div><div class='am-gallery-desc'><p>剩"+result.obj[i].number+"件&nbsp;&nbsp;售价"+result.obj[i].price+"</p></div></a></li> ";
				        	}
			        		$("#my-search-content").empty();
			        		$("#my-search-content").append("<ul data-am-widget=\"gallery\" class=\"am-gallery am-avg-sm-2 am-avg-md-3 am-avg-lg-4 am-gallery-bordered\" data-am-gallery=\"{  }\"  ><h2><span></span>搜索结果</h2>"+contentss.join(" ")+"</ul>");
			        		
			        		
			        	}else{
			        		$("#my-search-content").empty();
			        		$("#my-search-content").append("<center>没有找到相关商品！</center>");
			        	}
			
			        },
			        error: function (request, error) {
			        	$("#my-search-content").empty();
		        		$("#my-search-content").append("<center>没有找到相关商品！</center>");
			        }
		  });
		}
			//格式化日期
			function formatDate (strTime) {
			    var date = new Date(strTime);
			    return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+" "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
			}
			//返回上一页	
			function back(){
				history.back()
			}
</script>
<style type="text/css">
#queryCom img {
   width:250px;
   height:260px;
   border: 5px;
   margin: 5px;
   border-color: gray
}
#mydiv{
	border: 1px solid white;
	text-align: left;
	padding: 2px
}
.list-content{
   width:570px;
   height:300px;
   border: 5px;
   margin: 5px;
}
</style>
</head>
<body style=" background: #F0FFF0;">
<div class="am-slider am-slider-default" data-am-flexslider id="demo-slider-0" style="border-bottom: 1px solid #b6b6b6;">
 <header data-am-widget="header"
          class="am-header am-header-default joan-head" style="background: #FFB6C1">
      <div class="am-header-left am-header-nav">
          <a href="#" onclick = "back();" target="_self" class="">

                <i class="am-icon-mail-reply"></i>
          </a>
      </div>

      <h1 class="am-header-title">
          <a href="#title-link" class="">
         	商品信息
          </a>
      </h1>

      <div class="am-header-right am-header-nav">
          <a href="${ctx }/mobile/"  target="_self" class="">

                <i class="am-header-icon am-icon-home"></i>
          </a>
      </div>
  </header>
 
</div>
		<div class="list-content">
			 
			 	<div id="queryCom" class="product" >
					<!-- 动态显示商品 -->
 				</div>
			 <div id="count_num">
			 </div>
		</div>
		<!--搜索  -->
	<div class="am-popup" id="my-popup-search">
		<span data-am-modal-close class="am-close">&times;</span>
		<div class="am-popup-inner" id="ajax-popup">
			<div class="am-popup-hd">
				<h4 class="am-popup-title">搜索</h4>
				<span data-am-modal-close class="am-close">&times;</span>
				<div><br/>
			<form class="am-form-inline" role="form">
				<div class="am-form-group">
					<input type="text" size="50" id="search-content" maxlength="10" class="am-form-field" placeholder="输入你想要搜索的商品">
				</div>
				&nbsp;&nbsp;<button type="button" onclick="searchComm();" class="am-btn am-btn-success">搜索</button>
			</form>
			</div>
			</div>
			
			<div>
				<!-- 分页 -->
				
				
				<div id="my-search-content"></div>
				
				<!-- 分页 -->
				<div id="count_num"></div>
			</div>
		</div>
	</div>
<!--底部 -->
${bottom}
</body>
</html>